<template>
  <ul class="news-list">
    <li>编号：{{ query.id }}</li>
    <li>标题：{{ query.title }}</li>
    <li>内容：{{ query.content }}</li>

  </ul>
</template>

<script setup lang="ts" name="DetailDemo3">
  import {toRefs} from 'vue'
  /*
  * 从 Vue 导入 toRefs，这个方法用于将响应式对象转换为普通对象的引用，从而允许对象的属性在模板中直接使用，而不需要手动解构。
  * */
  import {useRoute} from 'vue-router'
  /*
  * 从 vue-router 导入 useRoute，这是一个 Vue Router 提供的钩子函数，用于获取当前路由的状态（如路径、查询参数等）。
  * */
  let route = useRoute()
  console.log("Detail.vue文件===",route)
  /*
  * 使用 useRoute 获取当前路由的对象，并将其保存在 route 变量中。
  * 这个对象包含了路由的各种信息，例如路由路径、查询参数、路由元数据等。
  * */
  let {query} = toRefs(route)
  console.log("Detail.vue文件query值===",query)
  /*
  * 使用 toRefs 将 route 中的 query 对象转换为响应式引用，
  * 使得 query 对象的每个属性（如 query.id, query.title, query.content）都可以在模板中被自动更新并显示。
  * */


</script>

<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }

  .news-list>li {
    line-height: 30px;
  }
</style>